import React from "react"

import { MenuData } from "@/routes/type"

import FixedSider from "./components/fixedSider"
// import { useNavigate } from "react-router"
import VerticalSider from "./components/verticalSider"
import { useGlobalSider } from "./hooks/useGlobalSider"
import { GlobalMenuOption } from "./types"

interface GlobalSiderProps {
	// collapsed: boolean
	// setCollapsed: (collapsed: boolean) => void
	onSelect?: (selected: any) => void
	menuData: MenuData
	locale: "zh_CN" | "en_US"
}
const { useState } = React
const GlobalSider: React.FC<GlobalSiderProps> = ({ onSelect, menuData, locale }) => {
	const [collapsed, setCollapsed] = useState(false)
	// const navigate = useNavigate()
	const { currentSideMenus, handleShowVerticalSider, openKeys, selectedKeys, handleOpenChange, routeMenus, getRouterFromKey } =
		useGlobalSider(setCollapsed, menuData, locale)
	return (
		<>
			<FixedSider
				routeMenus={routeMenus as GlobalMenuOption[]}
				selectedKeys={selectedKeys}
				openKeys={openKeys}
				onClick={handleShowVerticalSider}
			/>
			<VerticalSider
				collapsed={collapsed}
				setCollapsed={setCollapsed}
				currentSideMenus={currentSideMenus}
				selectedKeys={selectedKeys}
				openKeys={collapsed ? [] : openKeys}
				hideButton={!currentSideMenus.length}
				onSelect={item => {
					const selectedRouter = getRouterFromKey(item.key)
					// selectedRouter.component && navigate(selectedRouter.component)
					onSelect && selectedRouter.component && onSelect(selectedRouter.component)
				}}
				onOpenChange={handleOpenChange}
			/>
		</>
	)
}

export default React.memo(GlobalSider)
